// 存放学生的数组
const list = []

// 点击显示对话框
function showDialog() {
  dialogShow()
}

// 点击显示用户
function showStudents() {
  let str = `<tr class="t-header">
  <th>序号</th>
  <th>名称</th>
  <th>年龄</th>
  <th>性别</th>
  <th>备注</th>
</tr>`
  // 遍历数组
  for (let i = 0; i < list.length; i++) {
    // 拼接tr
    str += `
      <tr>
        <td>${i + 1}</td>
        <td>${list[i].username}</td>
        <td>${list[i].age}</td>
        <td>${list[i].gender}</td>
        <td></td>
      </tr>
    `
  }
  // 把tr拼接到table中，显示
  let table = document.getElementsByClassName('students-table')[0]
  table.innerHTML = str
  console.log(str)
}

// 点击添加按钮隐藏对话框
function addStudent() {
  // 找用户名元素获得值
  let username = document.getElementsByClassName('username')[0].value
  // 验证用户名不能空
  if (isEmptyString(username)) {
    return alert('用户名不能空')
  }
  // 找到年龄元素获得值
  let age = document.getElementsByClassName('age')[0].value
  age = Number(age)
  if (isNaN(age)) {
    return alert('年龄必须是数字')
  }
  if (age <= 0) {
    return alert('年龄必须大于0')
  }
  // 找到所有的radio,是html元素集合，类似数组可以使用普通for进行遍历
  let radios = document.getElementsByClassName('gender')
  let gender = null
  for (let i = 0; i < radios.length; i++) {
    if (radios[i].checked === true) {
      gender = radios[i].value
      break
    }
  }
  // 组装一个对象
  let student = {}
  student.username = username
  student.age = age
  student.gender = gender
  student.id = getMaxId() + 1
  // 存放到数组中
  list.push(student)
  console.log(list)
  alert('添加用户成功')
  // 隐藏对话框
  dialogHide()
  // 重置表单元素的值
  document.getElementsByClassName('username')[0].value = ''
  document.getElementsByClassName('age')[0].value = ''
}
// 点击取消按钮隐藏对话框
function addCancel() {
  dialogHide()
}

function dialogShow() {
  // 找到对话框元素
  let dialog = document.getElementsByClassName('dialog')[0]
  dialog && (dialog.style.display = 'block')
}
function dialogHide() {
  // 找到对话框元素
  let dialog = document.getElementsByClassName('dialog')[0]
  dialog && (dialog.style.display = 'none')
}

// 获得数组元素对象的最大id值
function getMaxId() {
  if (list.length === 0) {
    return 0
  }
  let maxId = list[0].id
  for (let item of list) {
    if (item.id > maxId) {
      maxId = item.id
    }
  }
  return maxId
}
